import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'echarts-for-react';

import { COLOR_LIST } from '@/utils/constants';
import { subscribeComp } from '@/services/bajaService';

class EchartsBar extends Component {

  static defaultProps = {
    title: '',
    fontSize: '24px',
    bSubscribe: true,
    bDashboard: true
  }

  constructor(props) {
    super(props);
    this.subs = [];
    const {title, fontSize, legends, data, bDashboard} = props;
    this.option = this.initOption(title, parseInt(fontSize), legends, data, bDashboard);
  }

  initOption = (title, fontSize, legends, data, bDashboard=true) => ({
    title: {
      text: title,
      left: 'center',
      textStyle: {
        color: bDashboard?'white':'black',
        fontSize: fontSize,
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      show: !bDashboard,
      feature: {
        saveAsImage: {show: !bDashboard}
      }
    },
    xAxis: [{
      type: 'category',
      boundaryGap: true,
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        lineStyle: {
          color: bDashboard?'white':'black',
        }
      },
      axisLabel: {
        fontSize: fontSize*0.8,
      },
      data: legends
    }],
    yAxis: [{
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dotted',
          opacity: 0.3,
          color: ['#aaa', '#ddd']
        }
      },
      axisLine: {
        lineStyle: {
          color: bDashboard?'white':'black',
        }
      },
      axisLabel: {
        fontSize: fontSize*0.8,
      }
    }],
    series: [{
      type: 'bar',
      barWidth: '50%',
      label: {
        fontSize: fontSize*0.8,
      },
      itemStyle: {
        color: params => data[params.dataIndex].color?data[params.dataIndex].color:COLOR_LIST[params.dataIndex%COLOR_LIST.length],
      },
      name: title,
      data: data
    }]
  })

  updateChart = (value, componentName) => {
    const { data } = this.option.series[0];
    data.forEach((item) => {
      if (item.ord.endsWith("/" + componentName)) {
        item.value = value;
      }
    });
    this.option.series[0].data = data;
    if(this.echarts) {
      this.echarts.getEchartsInstance().setOption(this.option);
    }
  }

  componentWillUnmount() {
    if(this.echarts) {
      this.echarts.getEchartsInstance().dispose();
    }
  }

  subscribeChart = () => {
    this.props.data.forEach((item)=> {
      subscribeComp(item.ord, (component)=>{
        const value = parseFloat(component.getOut().getValue().toFixed(2));
        this.updateChart(value, component.getName());
      }).then((sub)=> {
        this.subs.push(sub);
      });
    });
  }

  componentDidMount() {
    if(this.props.bSubscribe) {
      this.subscribeChart();
    }
  }

  componentWillUnmount() {
    this.subs.forEach((sub)=>{
      sub.unsubscribeAll();
      sub.detach();
    });
  }

  componentWillReceiveProps(nextProps) {
    const { title, fontSize, legends, data, bDashboard } = nextProps;
    if(legends != this.props.legends || data != this.props.data) {
      this.option = this.initOption(title, parseInt(fontSize), legends, data, bDashboard);
    }
  }

  render() {
    // const { bDashboard } = this.props;
    return (
      <ReactEcharts
        ref={(e) => { this.echarts = e; }}
        notMerge={true}
        lazyUpdate={true}
        // theme={bDashboard?'dark':'light'}
        option={this.option}
        style={{width:'100%',height:'100%',backgroundColor:'transparent'}}
      />
    );
  }
}

EchartsBar.propTypes = {
  title: PropTypes.string,
  fontSize: PropTypes.string,
  legends: PropTypes.array.isRequired,
  data: PropTypes.array.isRequired,
  bSubscribe: PropTypes.bool,
  bDashboard: PropTypes.bool
}

export default EchartsBar;
